<template>
  <div class="my-order-items">
    <el-card header="我的订单项">
      <el-table :data="orderItemList" v-if="orderItemList.length>0" :height="tableHeight">
        <el-table-column label="名称" width="160" align="center" prop="productName"/>
        <el-table-column label="图片" align="center" prop="pic" :show-overflow-tooltip="true">
          <template #default="{row}">
            <span v-if="row.productPic===''">暂无</span>
            <el-image v-else :src="row.productPic" style="width: 60px; height: 60px" fit="fill"
                      :preview-src-list="[row.productPic]"/>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="100" align="center" prop="productPrice">
          <template #default="{row}">
            <span style="color: red;font-weight: bolder">￥{{ Number(row.productPrice).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可以获得积分" width="200" align="center" prop="integration"/>
        <el-table-column label="服务店面" width="200" align="center" prop="serviceStoreName"/>
        <el-table-column label="所属品牌" width="200" align="center" prop="brandName"/>
      </el-table>
      <el-row>
        <el-col :span="20"></el-col>
        <el-col :sapn="4">
          <m-button style="float: right;margin-top: 10px" text="返回" @click="toMemberCenter"
                    classStyle="main-btn"></m-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'
import orderApi from '../../api/order'
import MButton from '../../components/MButton.vue'

export default {
  name: 'MyOrderItems',
  components: { MButton },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      // 订单项
      orderItemList: [],
      tableHeight: window.innerHeight - 460,
    })
    //---------------------method start
    let orderId = route.query.orderId
    // 获取所有订单项
    const getMemberOrderItems = async () => {
      const res = await orderApi.getMemberOrderItems(orderId)
      state.orderItemList = res.data
      // console.log(res)
    }
    // 去个人中心
    const toMemberCenter = () => {
      router.push('/member/center')
    }
    //---------------------method end

    //----------------钩子
    onMounted(() => {
      getMemberOrderItems()
    })

    return {
      ...toRefs(state),
      toMemberCenter
    }
  }
}
</script>

<style scoped lang="scss">

</style>
